<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <meta content="emai=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <title>社团列表</title>
    <style>
        .g-list-group {
            width: 100%;
        }

        .g-list-item {
            border-bottom: 1px solid #e2e2e2;
            text-align: center;
            padding: 20px 7.5%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            .g-list-item:nth-of-type(odd) {
                border-right: 1px solid #e2e2e2;
                clear: both;
            }

            .g-list-item .avatar {
                border: 5px solid #fff;
                margin-bottom: 7px;
                height: 80px;
                width: 80px;
            }

            .g-list-item .title {
                font-size: 2rem;
                margin-bottom:10px;
            }

            .g-list-item .description {
                color: #d2d2d2;
                font-size: 1.4rem;
                text-align: left;
                margin-top: 15px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
    </style>
</head>
<body>
    <div class="wrapper">
    	<?php if ($organization):?>
	    	<?php foreach ($organization as $key=>$item):?>
	    	
	    	<?php if( $key % 2 == 0):?>
	        <div class="g-list-group clear flex-wrapper">
	        <?php endif;?>
	        
	             <section class="g-list-item flex-1">
	                <span class="avatar" data-href="/organization/detail?id=<?php echo $item['id']?>&type=2">
	                    <img src="<?php echo STATIC_IMAGE . $item['icon']?>" alt="" />
	                </span>
	                <p class="title" data-href="/organization/detail?id=<?php echo $item['id']?>&type=2"><?php echo $item['organization_name']?></p>
	                <a class="<?php echo $item['class']?>" <?php if($item['user_status'] == 3):?> href="/organization/join?id=<?php echo $item['id']?>" <?php endif;?>>
	                	<?php echo $item['user_status_name']?>
	                </a>
	                <p class="description interception" data-href="/organization/detail?id=<?php echo $item['organization_id']?>&type=2"><?php echo $item['description']?></p>
	            </section>
	            
	        <?php if($key % 2 == 1):?>
	        </div>
	        <?php endif;?>
	        
	        <?php endforeach;?>
        <?php endif;?>
    </div>
    <script src="/js/zepto-1.1.6.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
</body>
</html>
